<template>
  <div class="costRevenue clearfix" v-loading="loading">
    <div class="logoBg"><img src="~@/assets/images/common/fiveG.png" /></div>
    <div class="heading">
      收入分析：<span class="redTitle"
        >核心平台收入{{ accMonth }}环比情况——从费用使用构成维度看{{
          areaLvl
        }}</span
      >
    </div>
    <div class="content">
      <div class="tableBox">
        <el-table
          border
          stripe
          style="width: 100%"
          class="tableTh28"
          ref="table"
          :data="tableData"
          :span-method="arraySpanMethod"
        >
          <el-table-column
            fixed
            :label="accMonth + '收入环比（万元）'"
            prop="class2"
            class-name="first-title"
            min-width="30"
          ></el-table-column>
          <el-table-column
            fixed
            :label="accMonth + '收入环比（万元）'"
            prop="class1"
            class-name="second-title"
            min-width="70"
          ></el-table-column>
          <el-table-column
            fixed
            :label="accMonth + '收入环比（万元）'"
            prop="indexName"
            class-name="third-title"
            min-width="80"
          ></el-table-column>
          <el-table-column
            v-for="(item, index) in colList"
            :prop="'data' + index"
            :label="item"
            :key="index"
            min-width="40"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row['data' + index] > 0"
                style="color: #5585bf"
                >{{ scope.row["data" + index] }}</span
              >
              <span v-else style="color: #c00000">{{
                scope.row["data" + index]
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { mergeSpan } from "@/utils/mixin";
export default {
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
    loading: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      // loading: false,
      tableData: [],
      accMonth: "",
      colList: [],
      rightDecreaseData: {},
      rightIncreaseData: {},
      rightDecreaseIndexName: {},
      rightDecreaseAmount: {},
      decreaseAmount: "",
      increaseAmount: "",
      areaLvl: "",
    };
  },
  created(){
    
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
        return this.spanArr[rowIndex][columnIndex];
      }
    },
    getData() {
      this.$emit("update:loading", true);
      $budgetAPI.getTrendDataByArea(
        { token: this.form.token, areaId: this.form.areaId, accMonth: this.form.month },
        (res) => {
          if (res && res.code == 0) {
            if (res.content.area.areaLvl == 2) {
              this.areaLvl = "(分公司)";
            } else if (res.content.area.areaLvl == 3) {
              this.areaLvl = "(县分)";
            } else if (res.content.area.areaLvl == 4) {
              this.areaLvl = "(支局)";
            } else {
              this.areaLvl = "";
            }
            this.colList = res.content.tableData.colList;
            this.accMonth = res.content.accMonth.slice(4) + "月份";
            this.tableData = res.content.tableData.data;
            res.content.tableData.data.map((item, index) => {
              for (let i = 0; i < item.dataList.length; i++) {
                item["data" + i] = item.dataList[i];
              }
            });
            this.spanArr = mergeSpan(this.tableData, [
              "class2",
              "class1",
              "indexName",
            ]);
          } else {
            this.alertError(res);
          }
          this.$emit("update:loading", false);

          this.$nextTick(() => {
            this.$refs.table.doLayout();
          })
        },
        (err) => { this.$emit("update:loading", false); }
      );
    },
  },
};
</script>

<style  lang="scss" scoped>
.costRevenue {
  padding: 20px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  position: relative;
  .costRevenue.clearfix:after,
  .costRevenue.clearfix:before {
    content: "";
    display: table;
  }
  .costRevenue.clearfix:after {
    clear: both;
  }
  .costRevenue.clearfix {
    *zoom: 1;
  }
  .logoBg {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .heading {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 40px;
    .redTitle {
      color: #c00000;
    }
  }
  .content {
    .tableBox {
      margin-right: 10px;
      border-top: 1px solid #9abcf1;
      border-left: 1px solid #bfbfbf;
      border-right: 1px solid #bfbfbf;
      border-bottom: 1px solid #bfbfbf;
      /deep/ .el-table.tableTh28 {
        .cell {
          padding: 0 !important;
          transform: scale(0.9);
          // line-height: normal !important;
        }
        th {
          font-size: 12px;
          height: 23px;
          padding: 0;
          .cell {
            line-height: 20px;
            height: 20px;
          }
        }

        /deep/ tr.el-table__row td {
          font-size: 12px;
          padding: 0 !important;
        }
      }
      /deep/ .tableTh28 .el-table__header {
        .first-title.is-leaf {
          position: relative;
          border-right: 1px solid #d7e5fb !important;
          .cell {
            color: #d7e5fb;
          }
        }

        .second-title.is-leaf {
          position: relative;
          border-right: 1px solid #d7e5fb !important;
          .cell {
            color: #d7e5fb;
          }
        }
        .third-title.is-leaf {
          overflow: visible;
          .cell {
            width: 300%;
            left: -150%;
          }
        }
      }
      /deep/ .el-table tr:last-child td {
        color: #333;
        text-align: center;
        border-bottom: 1px solid transparent !important;
        border-right: 1px solid #bfbfbf !important;
      }
    }
  }
}
</style>
